<template>
  <div class="main_contain">

    <div class="container">
      <!--      <img
                style="width: 100%;"
                src="@/assets/537_img.jpg"
                alt="537"
            />-->

      <!--帽子-->
      <div class="hat">
        <van-tabs v-model:active="activeHat" swipeable :show-header="false">
          <van-tab v-for="image in hats">
            <img :src="image" alt="耳朵"/>
          </van-tab>
        </van-tabs>
      </div>

      <!--机身-->
      <div class="frame"></div>
      <!--相机-->
      <div class="camera">
        <div class="in">
          <div class="in1">
            <div class="in2">

            </div>
          </div>
        </div>
      </div>

      <!--贴纸-->
      <div class="decal">
        <div class="bottom"></div>
        <div class="top"></div>
        <div class="de_main"></div>
      </div>
      <!--屏幕-->
      <div class="screen">
        <router-view></router-view>
        <!--显示-->
        <!--        <div class="screen_show">
                  <van-tabs v-model:active="active" swipeable :show-header="false">
                    <van-tab v-for="index in pageSize" :title="'标签 ' + index">
                      <div class="wrapper">
                        <div v-for="app in apps.slice(9*(index-1),9*(index-1)+9)" :key="app.key"
                             style="height: 55px;width: 50px;">
                          &lt;!&ndash;                  <van-image class="app_img"
                                                       :src="app.img"
                                                       alt="app"/>&ndash;&gt;
                          <img class="app_img"
                               :src="app.img"
                               alt="app"/>
                          <div>{{ app.name }}</div>
                        </div>
                      </div>
                    </van-tab>
                  </van-tabs>

                  <div class="points">
                    <van-icon v-for="item in pageSize" size="6" name="stop-circle"
                              :color="item === Number(active) + 1 ? '#FFDCE5' : '#F088B5'"/>
                  </div>
                  <div class="face" @click="play">
                    <img class="app_img"
                         alt="face"
                         src="@assets/face8.png"
                         style="width: 100% ; object-fit: contain;"
                    />

                  </div>


                </div>-->
      </div>


    </div>
  </div>

</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue";


const apps = ref([
  {img: "/assets/app_1.jpg", name: "カメラ", page: "", key: "0"},
  {img: "/assets/app_2.jpg", name: "カメラ", page: "", key: "1"},
  {img: "/assets/app_3.gif", name: "カメラ", page: "", key: "2"},
  {img: "/assets/app_4.jpeg", name: "カメラ", page: "", key: "3"},
  {img: "/assets/app_5.jpeg", name: "カメラ", page: "", key: "4"},
  {img: "/assets/app_6.jpg", name: "カメラ", page: "", key: "5"},
  {img: "/assets/app_7.jpg", name: "カメラ", page: "", key: "6"},
  {img: "/assets/app_8.jpg", name: "カメラ", page: "", key: "7"},
  {img: "/assets/app_9.jpg", name: "フルバム", page: "", key: "8"},
  {img: "/assets/app_10.jpeg", name: "フォバム", page: "", key: "9"},
  {img: "/assets/app_11.jpeg", name: "相机", page: "camera", key: "10"},
  {img: "/assets/app_12.jpg", name: "ォトアル", page: "", key: "11"},
])

const pageSize = ref(Math.ceil(apps.value.length / 9))
onMounted(() => {
  pageSize.value = Math.ceil(apps.value.length / 9)
})

const activeHat = ref('')
const hats = [
  '/assets/hat_1.png',
  '/assets/hat_2.png',
  '/assets/hat_3.png',
];


</script>
<style>
.van-grid-item__content {
  background: rgba(0, 0, 0, 0);

}
</style>
<style scoped>
.main_contain {
  width: 100%;
  height: 100vh;
  background: #F7F8FA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hat {
  z-index: 999;
  position: relative;
  left: -1px;
  top: -105px;
  width: 350px;
}

.hat img {
  width: 300px;
  object-fit: contain;
}

.container {
  width: calc(192 * 1.8px);
  height: calc(338 * 1.8px);
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 400px;
  margin: 5px 8px;
  text-align: center;
  position: relative;
}


.container img {
  position: relative;
}

.frame {
  width: 345px;
  height: 606px;
  border-radius: 122px;

  position: absolute;
  left: 21px;
  top: 21px;
  transition: .2s all;
  color: #333;
  box-shadow: 7px 7px 12px rgba(0, 0, 0, .4),
  -7px -7px 12px rgba(255, 255, 255, .9);
  display: block;

  background: black;
  /*background: -webkit-radial-gradient(120px 132px, circle, #ffffff, rgb(190, 175, 175));*/
  background: -webkit-radial-gradient(120px 132px, circle, #ffffff, rgb(190, 175, 175));
  background: -moz-radial-gradient(150px 132px, circle, #ffffff, rgba(0, 0, 0, 1));
  background: radial-gradient(150px 132px, circle, #ffffff, rgba(0, 0, 0, 1));

}

.camera {
  width: 53px;
  height: 53px;
  border-radius: 25px;
  position: absolute;
  left: 163px;
  top: 67px;
  z-index: 200;
  background-color: #f6f6f6;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .4),
  -1px -1px 5px rgba(255, 255, 255, .9);
}

.camera .in {
  width: 45px;
  height: 45px;
  border-radius: 25px;
  position: relative;
  left: 4.3px;
  top: 4.3px;
  background-color: #050303;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .4),
  -1px -1px 5px rgba(255, 255, 255, .9);
}

.camera .in1 {
  width: 15px;
  height: 15px;
  border-radius: 25px;
  position: relative;
  left: 15px;
  top: 15px;
  background: #000000;

  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 1),
  inset -2px -1px 2px rgba(255, 255, 255, 1);
}

.camera .in2 {
  width: 3px;
  height: 3px;
  border-radius: 1.5px;
  position: relative;
  left: 2px;
  top: 2px;
  background: #FFF;
  box-shadow: 1px -1px 2px rgba(255, 255, 255, 1),
  -1px 2px 2px rgba(255, 255, 255, 1);
}

/*贴纸*/
.decal {
  width: 279px;
  height: 548px;
  border-radius: 91px;

  position: absolute;
  left: 53px;
  top: 50px;

  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: 350px;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #939090;
}

.decal .bottom {
  width: 256px;
  height: 50.6px;
  z-index: 230;
  position: relative;
  left: 12px;
  top: 499px;
  background-image: url("@/assets/bottom.png");
  /*背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;

  /* 让背景图基于容器大小伸缩 */
  background-size: 100%;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  /*background-color: #f6c705;*/
}

.decal .top {
  width: 256px;
  height: 50.6px;
  z-index: 180;
  position: relative;
  left: 12px;
  top: -50px;
  background-image: url("@/assets/top.png");
  /*背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;

  /* 让背景图基于容器大小伸缩 */
  background-size: 100%;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  /*background-color: #f6c705;*/
}

.decal .de_main {
  width: 279px;
  height: 550px;
  border-radius: 91px;
  /*background-color: #646cff;*/
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background-image: url("@/assets/bg1.png");
  /*背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 让背景图基于容器大小伸缩 */
  background-size: 100% 453px;

}

.screen {
  background-color: #FEE7F3;
  width: 186px;
  height: 256px;
  position: absolute;
  top: 158px;
  left: 83px;
  border-radius: 30px;
  border-color: #71716F;
  border-width: 16px;
  border-style: solid;
  overflow: hidden;
  padding: 0;
}


</style>
